<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { submitAnswer } from '@/api/home.js'
const userStore = useUserStore();
import { showToast } from 'vant'

const props = defineProps({
  mode: String,
  tid: String
})

const loadingFlag = ref(false)
const emit = defineEmits(['check_result'])
const submitAnswerAction = () => {
  if (userStore.answer) {
    loadingFlag.value = true
    submitAnswer({
      tid: props.tid,
      answer: userStore.answer
    }).then(res => {
      loadingFlag.value = false
      console.log('_res', res)
      userStore.checkResultObj = res.data
      emit('check_result', {})
    }).catch(e => {
      console.log('_e', e)
      loadingFlag.value = false
    })
  } else {
    showToast('请选择答案！')
  }
}

</script>

<template>
  <div class="opt-btn-box">
    <template v-if="props.mode === 'must'">
      <van-button
        :disabled="!userStore.canAnswerFlag"
        round
        size="large"
        block
        type="primary"
        :loading="loadingFlag"
        @click="submitAnswerAction"
      >确定</van-button>
    </template>
    <template v-if="props.mode === 'random'">
      <van-button type="primary">random</van-button>
    </template>
    <template v-if="props.mode === 'race'">
      <van-button type="primary">抢答</van-button>
    </template>
  </div>
</template>

<style scoped>
.opt-btn-box{
  margin-top: 20px;
  width: 100%;
  display: inline-block;
  .van-button{
    width: 100%;
  }
}
</style>
